<template>
  <div class="wrapper">
    <code id="code" class="context_wrapper">
      <pre>{{ code }}</pre>
    </code>

    <a-button type="primary" @click="onCopy">复制</a-button>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from "vue";
import CodeBuilderStore from "@/store/CodeBuilderStore";
import message from "ant-design-vue/lib/message";

export default defineComponent({
  name: "CodeBuilder",

  setup() {
    let code = CodeBuilderStore.getStateToRefs().code;

    let onCopy = () => {
      let inp = document.createElement("textarea");
      inp.value = code.value;
      document.body.appendChild(inp);
      inp.select(); // 选择对象;

      document.execCommand("Copy"); // 执行浏览器复制命令

      message.info("代码已经复制到剪切板！", 1);

      inp.remove();
    };

    return {
      code,
      onCopy,
    };
  },
});
</script>

<style lang="less" scoped>
code.context_wrapper {
  text-align: left;
}
</style>